import View from 'ol/View'
import './style.css'
import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import ImageLayer from 'ol/layer/Image'
import { ImageStatic } from 'ol/source'

const target = 'map'

const center = [114.3165, 30.5953]
const view = new View({
    center,
    zoom: 10,
    projection: 'EPSG:4326'
})

// 加载高德地图瓦片
const layers = [new TileLayer({
    source: new XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
    })
})]

const map = new Map({
    target,
    view,
    layers
})

// 瓦片图层通常作为地图存在，加载静态图片图层

// 将静态图片加载到瓦片中间
const extent = [center[0] - 0.01, center[1] - 0.01, center[0] + 0.01, center[1] + 0.01]

const staticImageLayer = new ImageLayer({
    source: new ImageStatic({
        url: './public/peiqi.avif',
        imageExtent: extent
    })
})

map.addLayer(staticImageLayer)